<template>
    <div class="Zdpz-home">
        <div class="tabs-box">
            <el-tabs v-model="currentTab" @tab-click="handleClick">
                <el-tab-pane label="问题类型" name="1"></el-tab-pane>
                <el-tab-pane label="紧急程度" name="2"></el-tab-pane>
                <el-tab-pane label="关闭类型" name="3"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="filter-box">
            <zdpzFilter
                @filterData="getFilterData"  
                @add="add"  
                
            />
        </div>
        <div class="list-box">
            <list
                @pageChange="pageChange"
                @pageSizeChange="pageSizeChange"
                :list="list"
                :pageData="pageData"
                @edit="edit"
                :requestUrl="requestUrl"
                :currentTab="currentTab"
                @addSuccess="addSuccess"
            />
        </div>
        <!-- 添加弹框 -->
        <div class="add-box">
            <add ref="add" @addSuccess="addSuccess" :requestUrl="requestUrl" :currentTab="currentTab"/>
        </div>
        <!-- 编辑弹框 -->
        <div class="edit-box">
            <edit ref="edit" @addSuccess="addSuccess" :requestUrl="requestUrl" :currentTab="currentTab"></edit>
        </div>
    </div>
</template>

<script>
    import zdpzFilter from '@/components/Zdpz/filter'
    import list from '@/components/Zdpz/list'
    import add from '@/components/Zdpz/add'
    import edit from '@/components/Zdpz/edit'
    export default {
        name: 'Zdpz',
        data() {
            return {
                currentTab: '1',
                requestUrl: '/Zdpz-',
                filterData: {
                    name: ''
                },
                pageData: {
                    page: 1,
                    page_size: 5,
                    total: 0
                },
                list: [],
                showAdd: false,
                
            }
        },
        components: {
            zdpzFilter, list, add,edit
        },
        created () {
            this.getList()
        },
        methods: {
            addSuccess () {
                this.pageData.page = 1
                this.getList()
            },
            // tab-click
            handleClick () {
                this.pageData.page = 1
                this.getList()
            },
            // search
            getFilterData (v) {
                this.filterData = v
                this.pageData.page = 1
                this.getList()
            },
            pageChange (v) {
                this.pageData.page = v
                this.getList()
            },
            pageSizeChange (v) {
                this.pageData.page_size = v
                this.getList()
            },
            // 添加
            add () {
                // this.showAdd = true
                this.$refs.add.show()
            },
            //编辑
            edit(v){
                this.$refs.edit.show(v)
                // this.editData=v
            },
            // 获取列表
            getList () {
                this.$axios({
                    url: `${this.requestUrl}${this.currentTab}?_limit=${this.pageData.page_size}&_page=${this.pageData.page}&name_like=${this.filterData.name}`,
                    method: 'get'
                }).then(({ data, headers }) => {
                    this.list = data
                    this.pageData.total = Number(headers['x-total-count'])
                })
            }
        }
    }

</script>
<style>
.Zdpz-home{
    width: 90%;
    margin: auto;
}
</style>
